<template>
    <div class="sku" style="margin-bottom: 20px;width: 130%">
        <div v-if="showFlag != 1" class="sku-container"
             style="overflow: hidden;padding: 20px;border: 1px solid #E4E7ED;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
            <div style="color: red">规格名称：例如：颜色分类
                规格详情：例如：白色、黑色
                规格名称：例如：尺码
                规格详情：例如：S、M、L</div>
            <div class="theme" ref="theme" :key="index+'t'" v-for="(theme,index) in themeList"
                 style="margin-top: 20px">
                <el-form-item label-width="80px" style="width: 220px" label="规格名称">
                    <el-input  @clear="removeTheme(index)" @blur="updateParent" clearable
                              v-model="theme.name"></el-input>
                </el-form-item>
                <label style="margin-right: 20px">规格详情</label>
                <el-tag
                        :key="ind"
                        v-for="(tag,ind) in theme.items"
                        closable
                        :disable-transitions="false"
                        @close="handleClose(tag,index)">
                    {{tag.name}}
                </el-tag>
                <el-input
                        class="input-new-tag"
                        v-if="theme.inputVisible"
                        v-model="theme.inputValue"
                        :ref="'saveTagInput'+index"
                        size="small"
                        @blur="handleInputConfirm(index)"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput(index)">+ 添加</el-button>
            </div>

            <el-button  size="small" @click="addSkuTheme" round style="margin-top: 20px">添加规格</el-button>


            <div class="tag" v-if="skuThemes&&skuThemes.length>0">


                <el-divider></el-divider>

                <div class="tag-group" style="margin-top: 20px" :key="iddd" v-for="(theme,iddd) in themeList">
                    <div v-if="theme.name&&theme.items.length>0">
                        <span class="tag-group__title" style="margin-right: 20px;">{{theme.name}}</span>
                        <el-tag
                                v-for="(item,idx) in theme.items"
                                :key="idx"
                                :type="types[idx]"
                                effect="dark">
                            {{ item.name }}
                        </el-tag>
                    </div>
                </div>
            </div>


            <div class="sku-list" v-if="skuThemes&&themeList.length>0">


                <el-divider v-if="themeList"></el-divider>

                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="原价">
                        <el-input  :min="0"  @keyup.native="bathSet('oldPrice')" v-model="bathForm.oldPrice" style="width: 80px" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="现价">
                        <el-input  @keyup.native="bathSet('nowPrice')" v-model="bathForm.nowPrice" style="width: 80px" placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item label="利润">
                        <el-input  @keyup.native="bathSet('profit')" v-model="bathForm.profit" style="width: 80px" placeholder=""></el-input>
                    </el-form-item>
<!--                    <el-form-item label="库存">-->
<!--                        <el-input @keyup.native="bathSet('wares')" v-model="bathForm.wares" style="width: 80px" placeholder=""></el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="重量">
                        <el-input  @keyup.native="bathSet('weight')"  v-model="bathForm.weight" style="width: 80px" placeholder=""></el-input>
                    </el-form-item>
                </el-form>

                <el-table v-if="themeList"
                          :data="skuList"
                          border
                          style="width: 100%; margin-top: 20px">
                    <el-table-column
                            align="center"
                            :width="tableName.length*20+10+'px'"
                            :label="tableName">
                        <template slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="原价">
                        <template slot-scope="scope">
                            <el-input @keyup.native="numberSet('oldPrice',scope.$index)"   :disabled="skuList[scope.$index].disable" @blur="updateParent"
                                      v-model="skuList[scope.$index].oldPrice"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="现价">
                        <template slot-scope="scope">
                            <el-input :disabled="skuList[scope.$index].disable" @blur="updateParent"
                                      v-model="skuList[scope.$index].nowPrice"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="利润">
                        <template slot-scope="scope">
                            <el-input :disabled="skuList[scope.$index].disable" @blur="updateParent"
                                      v-model="skuList[scope.$index].profit"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="库存">
                        <template slot-scope="scope">
                            <el-input  disabled @blur="updateParent"
                                      v-model="skuList[scope.$index].stock"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="重量">
                        <template slot-scope="scope">
                            <el-input :disabled="skuList[scope.$index].disable" @blur="updateParent"
                                      v-model="skuList[scope.$index].weight"></el-input>
                        </template>
                    </el-table-column>

                    <el-table-column
                            width="90px"
                            align="center"
                            label="图片">
                        <template slot-scope="scope">
                            <!--                                            <el-form-item label="产品主图" prop="img">-->
                            <el-upload
                                    :class="{hide:skuList[scope.$index].img}"
                                    :limit="1"
                                    @click="selectImg(scope.$index)"
                                    ref="imgUpload"
                                    action="http://up-z2.qiniup.com"
                                    :auto-upload="true"
                                    list-type="picture-card"
                                    :on-preview="(file, fileList)=>handlePictureCardPreview(file, fileList,scope.$index)"
                                    :before-upload="handleUpload"
                                    :on-success="(response, file, fileList)=>{return handleimgUploadSuccess(response, file, fileList,scope.$index)}"
                                    :data="qiData"
                                    :file-list="skuList[scope.$index].img?[{url:domain+skuList[scope.$index].img}]:[]"
                                    :on-remove="(file, fileList)=>handleimgRemove(file, fileList,scope.$index)">
                                <i class="el-icon-plus"></i>
                            </el-upload>
                            <!--                                            </el-form-item>-->
                        </template>
                    </el-table-column>


                    <el-table-column
                            align="center"
                            label="禁用">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="skuList[scope.$index].disable"
                            >
                            </el-switch>

                        </template>
                    </el-table-column>

                </el-table>
            </div>


        </div>

        <el-dialog :visible.sync="dialogVisible" append-to-body>
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>

<style lang="stylus">
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .sku .el-upload--picture-card {
        width 60px;
        height 60px;
        line-height 60px;
    }

    .sku .el-upload-list__item {
        width 60px;
        height 60px;
        line-height 60px;
    }

    .hide .el-upload--picture-card {
        display: none;
    }

</style>

<script>
    import {sku} from "../../utils/sku";
    import {strsToList} from "../../utils/imgUtil";
    import {domain} from "../../api/qiniu";
    import {clearNoNum} from '../../utils/number'
    export default {
        props: {

            qData: {
                type: Object
            },
            mallSkus: {
                type: Array
            },
            skuThemes: {
                type: Array
            },
            disableFlag: {
                type: Boolean
            },
            showFlag:{
                type: Number
            }
        },
        created() {
            if(this.skuList==null){
                this.skuList = []
            }
            if(this.skuThemes==null){
                this.themeList = []
            }
            console.log(this.disableFlag)
        },
        data() {

            return {
                bathForm: {
                    stock: 0,
                    oldPrice: 0.0,
                    nowPrice: 0.0,
                    weight: 0.0,
                    profit: 0.0
                },
                dialogVisible: false,
                dialogImageUrl: '',
                qiData: this.qData,
                skuList: this.mallSkus,
                themeList: this.skuThemes,
                types: ['', 'success', 'info', 'danger', 'warning']
            }
        },
        computed: {
            // toImgList(){
            //     return function (index) {
            //         console.log(index)
            //         return strsToList(this.mallSkus[index].img,domain)
            //     }
            // },
            domain() {
                return domain
            },
            tableName() {
                let str = '';
                this.themeList.forEach(theme => {
                    if (!theme.name || !theme.items.length > 0) {
                        return
                    }
                    str = str + theme.name + '-';
                })
                return str.substr(0, str.length - 1)
            }

        },
        methods: {
            bathSet(key) {
                this.bathForm[key] = clearNoNum( this.bathForm[key])
                for (let i = 0; i < this.skuList.length; i++) {
                    if( this.skuList[i].disable){
                        continue
                    }
                    this.skuList[i][key] =  this.bathForm[key]
                }
            },
            numberSet(key,index){

                // this.skuList[index][key] = clearNoNum(this.skuList[index][key])
                this.$set(this.skuList[index],key, clearNoNum(this.skuList[index][key]))
                // console.log(index+'??'+this.skuList[index][key])
            },
            //重组Sku
            updateSku() {
                //刷新内部组件
                this.skuList = this.initSku()
                this.updateParent()
            },
            //重组或者值改变的时候通知上级数据更新
            updateParent() {
                //更新父组件
                this.$emit('updateSku', this.themeList, this.skuList)
            },
            initSku() {
                let sts = [];
                let ski = []
                this.themeList.forEach(theme => {
                    if (!theme.name || !theme.items.length > 0) {
                        return
                    }
                    sts.push(theme.name)
                    ski.push(theme.items)
                })
                let skus = sku(ski)
                let res = []
                for (let i in skus) {
                    let item = {
                        name: skus[i],
                        stock: 0,
                        oldPrice: 0.0,
                        nowPrice: 0.0,
                        weight: 0.0,
                        profit: 0.0,
                        img: '',
                        theme:sts.join('-'),
                        disable: false
                    }
                    //如果名称没有改变 依旧保留
                    for (let i in this.skuList) {
                        let mallSku = this.skuList[i]
                        if (mallSku.name == item.name) {
                            Object.assign(item, mallSku)
                        }
                    }
                    res.push(item)
                }
                return res;
            },
            addSkuTheme() {
                let skuTheme = {
                    inputVisible: false,
                    inputValue: '',
                    name: '',
                    items: []
                }
                this.themeList.push(skuTheme)
                this.updateSku()
            },
            removeTheme(index) {
                this.themeList.splice(index, 1)
                //重组Skus
                this.updateSku()
            },
            handleClose(tag, index) {
                let tags = this.themeList[index].items
                tags.splice(tags.indexOf(tag), 1);
                //重组Skus
                this.updateSku()
            },

            showInput(index) {
                // this.themeList[index].inputVisible = true;
                this.$set(this.themeList[index], 'inputVisible', true)
                this.$nextTick(_ => {
                    this.$refs['saveTagInput' + index][0].$refs.input.focus();
                });
            },

            handleInputConfirm(index) {
                let tags = this.themeList[index].items
                let inputValue = this.themeList[index].inputValue;
                if (inputValue) {
                    tags.push({name: inputValue});
                }
                this.themeList[index].inputVisible = false;
                this.themeList[index].inputValue = '';
                //重组Skus
                this.updateSku()
            },
            handleimgUploadSuccess(response, file, fileList, index) {
                this.skuList[index].img = file.response.key
            },
            handleimgRemove(file, fileList, index) {
                this.skuList[index].img = ''
            },
            handleUpload(file) {
                this.qData.key = new Date().valueOf() + file.name
            },
            handlePictureCardPreview(file, fileList, index) {
                this.dialogImageUrl = file.url
                this.dialogVisible = true
            }
        }
    }

</script>
